<template>
    <div class="logon">
        <!-- 标语 -->
        <div class="p-box">
            <p class="p1">欢迎回来！</p>
            <p class="p2">Please login to your accounts</p>
        </div>

        <!-- 登录表单 -->
        <van-form @submit="userAxios(true)">
            <van-field
                v-model="user.phone"
                name="手机号"
                label="手机号"
                placeholder="手机号"
                autocomplete="off"
                :rules="[
                    {
                        required: true,
                        message: '请填写正确的手机号',
                        pattern: phoneReg,
                    },
                ]"
            />
            <van-field
                v-model="user.password"
                :type="user.isShow ? 'text' : 'password'"
                name="密码"
                label="密码"
                placeholder="密码"
                :right-icon="user.isShow ? 'eye-o' : 'closed-eye'"
                @click-right-icon="showPassword"
                autocomplete="off"
                :rules="[
                    {
                        required: true,
                        message: '请填写正确的密码',
                        pattern: passwordReg,
                    },
                ]"
            />

            <!-- 跳转 找回密码 -->
            <div class="forget-box">
                <div class="forget" @click="retrievePassword">忘记密码？</div>
            </div>

            <!-- 登录按钮 -->
            <div>
                <van-button
                    round
                    block
                    type="info"
                    native-type="submit"
                    color="linear-gradient(to right, #9dc8eb, #3948bf)"
                    >登录</van-button
                >
            </div>
        </van-form>

        <!-- 弹出层 弹出按钮 -->
        <div style="margin: 50px 15px 0">
            <van-button round block type="default" @click="showPopup"
                >注册</van-button
            >
        </div>
        <!-- 弹出层 -->
        <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '50%' }"
            closeable
        >
            <p class="p3">注册</p>

            <!-- 注册表单 -->
            <van-form @submit="userAxios(false)">
                <van-field
                    v-model="userRegister.phone"
                    name="手机号"
                    label="手机号"
                    placeholder="手机号"
                    autocomplete="off"
                    :rules="[
                        {
                            required: true,
                            message: '请填写正确的手机号',
                            pattern: phoneReg
                        },
                    ]"
                />
                <van-field
                    v-model="userRegister.password"
                    :type="userRegister.isShow ? 'text' : 'password'"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :right-icon="userRegister.isShow ? 'eye-o' : 'closed-eye'"
                    @click-right-icon="showRegisterPassword"
                    autocomplete="off"
                    :rules="[
                        {
                            required: true,
                            message: '必须以字母开头,6-16位字母数字下划线组合',
                            pattern: passwordReg,
                        },
                    ]"
                />
                <van-field
                    v-model="userRegister.nickName"
                    type="text"
                    name="昵称"
                    label="昵称"
                    placeholder="昵称"
                    autocomplete="off"
                    :rules="[
                        {
                            required: true,
                            message: '1-16位中英文数字下划线组合',
                            pattern: nicknameReg,
                        },
                    ]"
                />

                <!-- 注册按钮 -->
                <div class="button-box">
                    <van-button
                        round
                        block
                        type="info"
                        native-type="submit"
                        color="linear-gradient(to right,#3948bf,#9dc8eb)"
                        >注册</van-button
                    >
                </div>
            </van-form>
        </van-popup>
    </div>
</template>

<script>
export default {
    name: "Logon",
    data() {
        return {
            // 用户
            user: {
                // 手机号
                phone: "",
                // 密码
                password: "",
                //是否 明文显示 登录密码
                isShow: false,
            },

            // 是否展示 弹出层
            show: false,

            // 注册
            userRegister: {
                // 手机号
                phone: "",
                // 密码
                password: "",
                // 昵称
                nickName: "",
                //是否 明文显示 注册密码
                isShow: false,
            },

            // 手机号正则
            phoneReg: /^1[3-9]\d{9}$/,
            // 密码正则(必须以字母开头, 字母数字_组合[6-16])
            passwordReg: /^[A-Za-z]\w{5,15}$/,
            // 昵称正则(中英文数字下划线组合[1-16])
            nicknameReg: /^[\u4e00-\u9fa5A-Za-z0-9_]{1,16}$/,
        };
    },

    methods: {
        //切换明文 登录密码
        showPassword() {
            this.user.isShow = !this.user.isShow;
        },

        // 跳转到 找回密码路由
        retrievePassword() {
            this.$router.push({ name: "Retrievepassword" });
        },

        // 展示 注册弹出层
        showPopup() {
            this.show = true;
        },
        //切换明文 注册密码
        showRegisterPassword() {
            this.userRegister.isShow = !this.userRegister.isShow;
        },

        // 用户 登录请求/注册请求 
        userAxios(tf) {
            // tf ==> true登录 false验证

            // axios请求
            this.axios({
                method: "post",

                // 进行tf判断 填入对应 功能的参数
                url: tf ? "/login" : "register",
                data: {
                    phone: tf ? this.user.phone : this.userRegister.phone,
                    password: tf
                        ? this.user.password
                        : this.userRegister.password,
                    nickName: tf ? "" : this.userRegister.nickName,
                }
            }).then((res) => {
                
                // 对返回的信息 进行提示
                this.$toast(res.data.msg);

                // 判断 登录/验证
                if (tf) {
                    //登录成功
                    if (res.data.code === 200) {
                        // 本地缓存token
                        localStorage.setItem("token", res.data.token);
                        this.$router.push({ name: "Home" });
                    }
                } else {
                    //注册成功
                    if (res.data.code === 100) {
                        this.show = false;

                        // 给登录填入刚注册的 手机号和密码
                        this.user.phone = this.userRegister.phone;
                        this.user.password = this.userRegister.password;

                        //清除注册信息
                        for (let key in this.userRegister) {
                            if (key !== "isShow") {
                                this.userRegister[key] = "";
                            }
                        }
                    }
                }
            }).catch((err) => {
                
            });
        },
    },
};
</script>

<style lang="less" scoped>
.logon {
    .p-box {
        margin-top: 100px;
        padding-left: 15px;
        margin-bottom: 50px;

        .p1 {
            font-size: 28px;
            font-weight: 600;
            color: #646566;
        }

        .p2 {
            color: #666;
            margin-top: 36px;
            font-size: 16px;
        }
    }

    /deep/ .van-form {
        padding: 0 15px;

        .forget-box {
            display: flex;
            margin-top: 26px;
            margin-bottom: 54px;
            color: #e99036;
            font-size: 14px;
            .forget {
                margin-left: auto;
            }
        }
    }
    /deep/ .van-popup {
        .p3 {
            color: #4b54c9;
            font-weight: 600;
            margin-top: 15px;
            margin-bottom: 50px;
            padding-left: 15px;
            font-size: 24px;
        }

        .van-form {
            padding: 0;
        }

        .button-box {
            position: relative;
            margin: 50px 0 15px;
            padding: 0 15px;
        }
    }
}
</style>